.post-content
  box-sizing border-box
  padding-left 10%
  padding-right 10%

@media (max-width: 767px)
  .post-content
    padding-left 2rem
    padding-right 2rem

@media (max-width: 424px)
  .post-content
    padding-left 1rem
    padding-right 1rem

.post-content h1::before, h2::before, h3::before, h4::before, h5::before, h6::before
  display block
  content ""
  margin-top -4rem
  height 4rem
  width 1px
  visibility hidden

.post-metas
  display flex
  flex-direction row
  flex-wrap wrap

.post-meta
  & > i
    margin-right .15rem

  & > a:not(.hover-with-bg)
    margin-right .15rem

.post-prevnext
  margin-top 2rem
  display flex
  justify-content space-between

  .post-prev, .post-next
    display flex

    i
      font-size 1.5rem
      -webkit-transform translateZ(0)
      -moz-transform translateZ(0)
      -ms-transform translateZ(0)
      -o-transform translateZ(0)
      transform translateZ(0)

    a
      display flex
      align-items center

    .hidden-mobile
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 2
      text-overflow ellipsis
      overflow hidden

    @media (max-width: 575px)
      .hidden-mobile
        display none

  .post-prev:hover i, .post-prev:active i, .post-next:hover i, .post-next:active i
    -webkit-animation-duration 1s
    animation-duration 1s
    -webkit-animation-delay .1s
    animation-delay .1s
    -webkit-animation-timing-function ease-in-out
    animation-timing-function ease-in-out
    -webkit-animation-iteration-count infinite
    animation-iteration-count infinite
    -webkit-animation-fill-mode forwards
    animation-fill-mode forwards
    -webkit-animation-direction alternate
    animation-direction alternate

  .post-prev:hover i, .post-prev:active i
    -webkit-animation-name post-prev-anim
    animation-name post-prev-anim

  .post-next:hover i, .post-next:active i
    -webkit-animation-name post-next-anim
    animation-name post-next-anim

  .post-next
    justify-content flex-end

  .fa-chevron-left
    margin-right .5rem

  .fa-chevron-right
    margin-left .5rem

@keyframes post-prev-anim
  0%
    -webkit-transform translateX(0)
    transform translateX(0)
  50%
    -webkit-transform translateX(-0.35rem)
    transform translateX(-0.35rem)
  100%
    -webkit-transform translateX(0)
    transform translateX(0)

@keyframes post-next-anim
  0%
    -webkit-transform translateX(0)
    transform translateX(0)
  50%
    -webkit-transform translateX(0.35rem)
    transform translateX(0.35rem)
  100%
    -webkit-transform translateX(0)
    transform translateX(0)

// toc

#toc
  position -webkit-sticky
  position sticky
  top 2rem
  padding 3rem 0 0 0
  max-height 80%
  visibility hidden

.toc-header
  margin-bottom .5rem
  font-weight 500
  line-height 1.2

  &, & > i
    font-size 1.25rem

#tocbot
  max-height 100%
  overflow-y auto
  overflow -moz-scrollbars-none
  -ms-overflow-style none

  ol
    list-style none
    padding-inline-start 1rem

  &::-webkit-scrollbar
    display none

.tocbot-list
  ol
    list-style none
    padding-left 1rem

  a
    font-size 0.95rem

.tocbot-link
  color $tocbot-link-color

.tocbot-active-link
  font-weight bold
  color $tocbot-link-active-color

.tocbot-is-collapsed
  max-height 0

.tocbot-is-collapsible
  overflow hidden
  transition all 300ms ease-in-out

@media (max-width: 1024px)
  .toc-container
    padding-left 0
    padding-right 0

.custom, .comments
  margin-top 2rem

.katex-block
  overflow-x auto

.katex, .mjx-mrow
  white-space pre-wrap !important

.mjx-char
  line-height 1

mjx-container
  overflow-x auto
  overflow-y hidden !important
  padding .5em 0

  &:focus, svg:focus
    outline none
